<template lang="">
    <div>
        <h2>中间件管理</h2>

    </div>
    <el-form :data="form">
        <el-form-item label="中间件名称">
            <el-input v-model="form.name" placeholder="请输入中间件名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">搜索</el-button>
            <el-button type="warning" icon="el-icon-refresh" @click="fetch">刷新</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="name" label="中间件名称" width="180">
        </el-table-column>
        <el-table-column prop="version" label="版本">
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="el-pagination"
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="pageChangeHandle"
      @current-change="pageSizeChangeHandle"
    ></el-pagination>

</template>
<script setup lang="ts">
//复用封装的userTable 方法
import useUserTable  from '@/hooks/userTable'
import {getMiddlewareList} from './api/index'
import {reactive} from 'vue'

//搜索功能封装
const form = reactive({
    name:''

});

const { 
    list,
    pageNum,
    pageSize,
    total,
    pageChangeHandle,
    pageSizeChangeHandle,
    searchHandle
} = useUserTable(getMiddlewareList,form)



</script>

<style lang="">
    
</style>